<template>
    <el-input
        class="bar"
        v-model="modelValue.ChromRange"
        placeholder="start-end"
        @change="updateOptions"
        >
        <template #prepend>
            <el-select-v2
                ref="selectRef"
                v-model="modelValue[itemValue]"
                filterable
                placeholder="Select"
                style="width: 90px;"
                clearable
                highlight-current-row
                :options="options"
                >
            </el-select-v2>
        </template>
    </el-input>
</template>

<script lang="ts" setup name="Chrom">
    import { onMounted, ref, watch } from 'vue';

    let options:any = ref([])
    let initAllOptions: any = ref([])
    const itemValue = ref('') // 选项名
    const props = defineProps(['modelValue', 'searchItem', 'updateOptions',])


    onMounted(() => {
        itemValue.value = props.searchItem.value
    })

    watch(props.searchItem, (newValue:any) => {
        initAllOptions.value = newValue.options
        options.value = newValue.options
    }, {deep: true})
</script>